<template>
  <div class="pro-vipboard-mytask">
    <div class="items title clearBoth">
      <p class="number">编号</p>
      <p>分类</p>
      <p class="mode">模块</p>
      <p class="title">标题</p>
      <p class="finish">要求完成时期</p>
      <p class="jinji">紧急程度</p>
    </div>
    <div v-if="list.length > 0">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="items clearBoth">
        <p class="number" @click="showfunc(item.JE_PRO_TASK_ID)">{{ item.TASK_NUM }}</p>
        <p>{{ item.TASK_TASKTYPE_NAME }}</p>
        <p class="mode">{{ item.TASK_MKMC }}</p>
        <p class="title">{{ utilTitle(item.TASK_TITLE) }}</p>
        <p class="finish">{{ item.TASK_YJJS }} <span v-html="getDays(item)" /></p>
        <p class="jinji" v-html="jjcdcode(item)"></p>
      </div>
    </div>
    <img v-else class="nodata" src="./../../assets/img/nodata.png" alt="">
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    list: {
      type: Array,
      default: () => [],
    }
  },
  methods: {
    utilTitle(title) {
      if (title && title.length > 30) {
        return `${title.slice(0, 30)}...`;
      }
      return title || '';
    },
    showfunc(id) {
      JE.showFunc('JE_PRO_TASK', {
        id,
        type: 'form',
      });
    },
    jjcdcode(item) {
      let color = '';
      switch(item.TASK_JJCD_CODE) {
        case "01":
          color = '#999999';
          break;
        case "03":
          color = '#e69138';
          break;
        case "04":
          color = '#cc0000';
          break;
        default:
          color = '#000000';
      }
      return `<span>${item.TASK_JJCD_NAME}</span>`;
    },
    getDays(item) {
      let times = '';
      times = new Date(item.TASK_YJJS).getTime() - new Date().getTime();
      times = item.TASK_PROGRESS_CODE === '01' ? times : times * -1;
      const days = Math.floor(times / 1000 / 60 / 60 / 24);
      if (item.TASK_PROGRESS_CODE === '01') {
        return `<span>还剩<span class="blue">${days}</span>天</span>`;
      }
      return `<span class="yanqi">延期${days}天</span>`;
    },
  },
}
</script>

<style lang="scss">
  .pro-vipboard-mytask {
    .items {
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      margin-top: 10px;
      &.title {
        margin: 0;
        border-bottom: 1px solid #e0e0e0;
      }
      &:after {
        content: '';
        display: table;
        clear: both;
      }
      > p {
        width: 10%;
        float: left;
        &.number {
          cursor: pointer;
          color: rgb(0, 11, 255);
        }
        &.red {
          color: red;
        }
        &.title {
          width: 40%;
        }
        &.mode {

        }
        &.finish {
          width: 20%;
        }
        &.jinji {
          text-align: right;
        }
        .blue {
          color:#386bd0;
        }
        .yanqi {
          color: #ffffff;
          background: #D24D57;
          border-radius: 3px;
          position: relative;
          padding: 3px 5px;
          font-size: 12px;
          font-weight: 400;
          vertical-align: middle;
          top: -2px;
        }
      }
    }
    .nodata {
      width: 150px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
</style>
